<template>
	<view>
		<!-- https://ageapi.omwjhz.com:18888/v2/detail/20230306 -->
		<!-- https://ageapi.omwjhz.com:18888/v2/comment/20230306/?page=1 -->
		<!-- 自定义导航栏 -->
		<uni-nav-bar @clickLeft="back()" @clickRight="showComment()" :title="detail.name" left-icon="left" right-icon="chat" height="44px" background-color="#000" border="false" color="white" fixed status-bar>
		</uni-nav-bar>
		<view class="detail-header" v-show="!isloading">
			<!-- 动画毛玻璃背景 -->
			<image draggable="false" class="bg-blur-effect" :src="detail.cover"mode="scaleToFill" ></image>
			<!-- 动画主要信息 -->
			<view class="detail-info uni-flex uni-row">
				<view class="uni-flex uni-row uni-padding-warp" style="position: relative; height: 500rpx;">
					<!-- 动画图片 -->
					<image draggable="false" class="detail-icon" :src="detail.cover"></image>
					<!-- 动画信息 -->
					<view class="uni-flex uni-column uni-common-pl uni-common-mt">
						<text class="detail-title ">{{detail.name}}</text>
						<text class="detail-text detail-common-mt uni-text-nowrap">{{detail.area}}·{{detail.type}}·{{detail.writer}}</text>
						<text class="detail-text detail-common-mt uni-text-nowrap">首播时间：{{detail.time_format_2}}</text>
						<text class="detail-text detail-common-mt uni-text-nowrap">剧情类型：{{detail.plot}}</text>
						<text class="detail-text detail-common-mt uni-text-nowrap">播放状态：{{detail.status}}</text>
						<text class="detail-text detail-common-mt uni-text-nowrap">最近更新：{{detail.uptodate}}</text>
						
					</view>
					<!-- 热度& 收藏 -->
					<view class="detail-other uni-flex uni-row">
						<view class="uni-flex uni-row uni-center" style="flex: 1; justify-content: flex-start;">
							<uni-icons type="fire" color="#FF8C00" size="22"></uni-icons>
							<text class="other-title ">&nbsp;&nbsp;&nbsp;{{detail.rank_cnt}}</text>
						</view>
						
						<view @click="favoriteAction" class="uni-flex uni-row uni-center" style="flex: 1; justify-content: flex-start;">
							<uni-icons :type="favoriteIcon" color="#FF8C00" size="22"></uni-icons>
							<text class="other-title">&nbsp;&nbsp;&nbsp;{{detail.collect_cnt}}</text>
						</view>
						
					</view>
				</view>
			</view>
			<!-- 简介 -->
			<view class="detail-intro uni-padding-warp uni-margin-warp uni-common-pt uni-common-pb">
				<text style="line-height: 24rpx; font-size: 24rpx; color: #fff; font-weight: bold;">
					简介：
				</text>
				<text style="line-height: 24rpx; font-size: 24rpx; color: #a9a9a9;" class="detail-intro-text">
					{{intro}}
				</text>
				<text @click="showMoreIntro()"  style="margin-left: 10rpx; line-height: 24rpx; font-size: 24rpx; color: red;border-bottom: 1rpx solid red; cursor: pointer;" class="detail-intro-text detail-intro-more" v-show="!isshowMore">
					更多
				</text>
			</view>
		</view>
		<!-- 播放源切换 -->
		<view class="video-info uni-padding uni-common-mt uni-margin-warp">
			<text class="detail-text">播放源：
				<text @click="changeResource()" style="color: red; border-bottom: 1rpx solid red;">{{resourceName}}</text>
			</text>
			<view class="uni-flex uni-row episode-bg">			
				<view class='episode' v-for="item,index in playerList" style="width: 155rpx; padding: 10rpx 10rpx;" >
					<view @click="playVideo(item,index)" style="border: 1rpx solid white; border-radius: 4rpx; height: 50rpx;" class="uni-flex uni-center">
						<text class="age-content-title">第{{index+1}}集</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 选择视频源弹窗 -->
		<uni-popup ref="popup" type="bottom">
			<view class="uni-common-dark uni-flex uni-column" style="width: 100%; height: 500rpx; border-top-left-radius: 10rpx;border-top-right-radius: 10rpx; ">
				<text class="age-title uni-common-mt " style="text-align: center; width: 100%; height: 30rpx; line-height: 30rpx;">选择视频源</text>
				<view class="uni-common-mt uni-padding-warp uni-flex uni-row" style="flex-wrap: wrap;">
					<view v-for="item,index in allplayerList" style="width: 155rpx; padding: 10rpx 10rpx;">
						<view @click="selectResource(item)" :style="{border: selectedResIndex == index ? '1rpx solid red' : '1rpx solid white'}" class="uni-flex uni-center res-bg">
							<text class="age-content-title" :style="{color: selectedResIndex == index ? 'red' : 'white'}">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<ageloading v-show="isloading" color="transparent"></ageloading>
	</view>
</template>

<script>
	import ageloading from "@/pages/component/loading/age-loading.vue"
	
	export default {
		components: {
			ageloading
		},
		data() {
			return {
				detail:{},
				actID:"",
				isloading: true,
				intro:"",
				isshowMore: false,
				allplayerList:[], //全部资源
				playerList:[],//当前播放源
				resourceName:"",//当前播放源名称
				favoriteIcon:"heart",
				favoriteState:0,
				selectedResIndex:0,
				player_url1:"",
				player_url2:""
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 展示更多
			showMoreIntro() {
				console.log('点击了')
				this.isshowMore = true
				this.intro = this.detail.intro
			},
			// 切换播放源
			changeResource() {
				// 展示播放源弹窗
				this.$refs.popup.open("bottom")
			},
			// 收藏
			favoriteAction() {
				
				// 双向绑定改变图标样式
				if (this.favoriteIcon == 'heart-filled') { //已收藏
					this.favoriteIcon = 'heart'
					
				} else {
					this.favoriteIcon = 'heart-filled'
				}
				const key = this.actID.toString()
				var favdata = {}
				favdata[key] = this.favoriteIcon
				// uni长期存储数据
				uni.setStorage({
					key:"fav",
					data:favdata,
					success(res) {
						console.log(`存储结果：${res.data}`)
					}
				})
				
			},
			// 播放剧集
			playVideo(item,index) {
				if(typeof(item) == 'object') {
					console.log('================navito=============')
					console.log(this.player_url1)
					uni.navigateTo({	
						url:'/pages/video/animeVideo?url='+`${item[1]}`+`&detail=${JSON.stringify(this.detail)}`+`&index=${index}`+`&list=${JSON.stringify(this.playerList)}`+`&baseUrl=${this.player_url1}`,
						success(res) {
							console.log(res)
						},
						fail(error) {
							console.log(error)
						}
					})
					
					
				} else {
					uni.showToast({
						title:"数据有误！"
					})
				}
			
			},
			// 选择资源来源
			selectResource(item) {
				this.selectedResIndex =	this.allplayerList.indexOf(item)
				console.log(this.selectedResIndex)
				
				this.playerList = this.allplayerList[this.selectedResIndex].playlist
				this.resourceName = this.allplayerList[this.selectedResIndex].name
				
				this.$refs.popup.close()
			},
			//查看评论
			showComment() {
				const idstr = this.actID
				uni.navigateTo({
					 // url:`/pages/commentv2/commentv2?id=${idstr}`
					  url:vm.$myGlobalUrl + `/pages/comment/comment?id=${idstr}`
					 // url: `/pages/commentv3/commentv3?id=${idstr}`
				})
			}
		},
		onLoad(option) {
			console.log("数据：")
			console.log(option.id)			
			this.actID = option.id
			// js长期存储数据
			const vm = this
			var favlist = uni.getStorage({
				key:"fav",
				success: function(res) {
					let dic = res.data
					if (dic == undefined) {
						return;
					}
					vm.favoriteIcon = dic[vm.actID]
					if(vm.favoriteIcon == undefined) {
						vm.favoriteIcon = 'heart'
					}
				
				}
			})
		},
		mounted() {
			const vm = this
			uni.request({
				url:vm.$myGlobalUrl + `/v2/detail/${vm.actID}`,
				success(res) {
					console.log(res.data)
					vm.detail = res.data["video"]
					vm.isloading = false
					
					// 裁剪简介内容
					const maxLength = 80 // 设置最大字符数
					if (vm.detail.intro.length > maxLength) {
						vm.intro = vm.detail.intro.slice(0, maxLength) + '...'
					} else {
						vm.intro = vm.detail.intro
						vm.isshowMore = true
					}
					
					// 获取播放源
					const playerobj = vm.detail.playlists
					console.log(playerobj)
					const nameobj = res.data["player_label_arr"]
					var newplaylist = []
			
					for(const key in playerobj) {
						const name = nameobj[key]
						if (name.length > 0) {
							var obj = {}
							obj.name = name
							obj.playlist = playerobj[key]
							newplaylist.push(obj)
						}
					}
					vm.allplayerList = newplaylist
					console.log('全部数据：')
					console.log(newplaylist)
					vm.playerList = newplaylist[0].playlist
					vm.resourceName = newplaylist[0].name
					console.log(vm.playerList)
					console.log(res.data['player_jx'])
					vm.player_url1 = res.data['player_jx']['vip']
					vm.player_url2 = res.data['player_jx']['zj']
					console.log(vm.player_url1)
					console.log(vm.player_url2)
					
				},
				fail() {
					vm.isloading = false
					uni.showToast({
						title:"获取详情失败！"
					})
				}
			})
		}
		
	}
</script>

<style>
	.detail-header {
		position: relative;
	}
	
	.detail-info {
		position: absolute;
		left: 0%;
		top: 0%;
		width: 100%;
	}
	
	.detail-icon {
		width: 338rpx;
		height: 450rpx;
		border: 1rpx solid transparent;
		border-radius: 5rpx;
		margin-top: 25rpx;
	}
	
	.detail-title {
		color: white;
		font-size: 40rpx;
		line-height: 40rpx;
		font-weight: bold;
		max-width: 320rpx;
		/* 设置最多3行 */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;/*隐藏超出部分*/
		text-overflow: ellipsis; /*省略号*/
	}
	
	.detail-text {
		color: white;
		font-size: 26rpx;
		line-height: 26rpx;
		max-width: 320rpx;
		padding-left: 10rpx;
	}
	
	.detail-common-mt {
		margin-top: 25rpx;
	}
	
	.detail-other {
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
		height: 50rpx;
		width: 320rpx;
		/* background-color: red; */
	}
	
	.other-title {
		font-size: 24rpx;
		color: #fff;
	}
	
	.detail-intro {
		background-color: rgba(32, 32, 32, 1);
		border: 1rpx solid rgb(32, 32, 32);
		border-radius: 8rpx;
	}
	
	.detail-intro-text {
		/*隐藏超出部分*/
		overflow: hidden;
		/*省略号*/
		text-overflow: ellipsis; 
	}
	
	.bg-blur-effect {
		width: 100%;
		height: 500rpx;
		/* 毛玻璃效果 */
		filter: blur(25px);
	}
	
	.video-info {
		background-color: rgba(32, 32, 32, 1);
		border: 1rpx solid rgb(32, 32, 32);
		border-radius: 8rpx;
		min-height: 200rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
	}
	
	.episode-bg {
		flex-wrap: wrap;
		margin-top: 10rpx;
	}
	
	.res-bg {
		border-radius: 4rpx; 
		height: 50rpx;
	}
	
	/* 点击后缩放 */
	.episode {
		transition: transform 0.3;
	}
	
	.episode:active {
		transform: scale(0.9);
	}

</style>
